<template>
    <div class="admin-control">
        <div style="position: relative">
            <tab-control :tabs="tabLists" class="tab" :handleClick="handleClick"></tab-control>
            <el-button
                type="text"
                class="admin-control-add"
                @click="dialogFormVisible = true"
            >+ 添加管理员</el-button>
        </div>
        <router-view :changed="num"></router-view>
        <el-dialog title="添加" :visible.sync="dialogFormVisible" class="admin-control-edit">
            <el-form :model="form" label-position="left" :rules="rules" ref="ruleForm">
                <el-form-item label="用户名" :label-width="formLabelWidth" prop="admin_name">
                    <el-input v-model.trim="form.admin_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth" prop="admin_password">
                    <el-input v-model.trim="form.admin_password" autocomplete="off" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" :label-width="formLabelWidth" prop="again_password">
                    <el-input v-model.trim="form.again_password" autocomplete="off" type="password"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addAdmin">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import tabControl from "@/components/tabs/Tab";
export default {
    name: "admin-control",
    data() {
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.form.admin_password) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
         var validatePassWord = (rule, value, callback) => {
              let reg= /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
            if (value === "") {
                callback(new Error("请输入密码"));
            } else if(!reg.test(value)){
                callback(new Error("包含数字、大小写字母、特殊符号，长度8位以上"));
            } else {
                callback();
            }
        };
        
        return {
            num: 1,
            tabLists: [],
            dialogFormVisible: false, //添加管理员按钮
            form: {
                //添加管理员表单
                admin_name: "",
                admin_password: "",
                again_password: ""
            },
            formLabelWidth: "80px",
            rules: {
                admin_name: {
                    required: true,
                    message: "请填写用户名",
                    trigger: "blur"
                },
                admin_password: {
                    required: true,
                    validator: validatePassWord,
                    trigger: "blur"
                },
                again_password: {
                    required: true,
                    validator: validatePass2,
                    trigger: "blur"
                }
            }
        };
    },
    components: {
        tabControl
    },
    watch: {
        dialogFormVisible(n, o) {
            if (n == false, o == true) {
                this.$refs.ruleForm.resetFields()
            }
        }
    },
    created() {
        this.tabLists = this.$route.matched.slice(-2,-1)[0].meta.tabs;
        console.log(this.tabLists)
    },
    methods: {
        // 顶部导航栏
        handleClick(tab, event) {
            this.$router.push({
                path: this.tabLists[0].name
            });
        },
        // 添加管理员
        addAdmin() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.$http
                        .post(
                            "/admin/auth/index.php?act=adminManage&op=addAdmin",
                            this.form
                        )
                        .then(
                            res => {
                                if (res.code == 1) {
                                    this.$message({
                                        showClose: true,
                                        message: res.msg,
                                        type: "success"
                                    });
                                    this.dialogFormVisible = false;
                                    this.num++
                                } else {
                                    this.$message({
                                        showClose: true,
                                        message: res.msg,
                                        type: "error"
                                    });
                                }
                            },
                            err => {
                                this.$message.error("获取数据失败！");
                            }
                        );
                } else {
                    return false;
                }
            });
        }
    }
};
</script>
<style scoped lang="scss">
.admin-control {
    .admin-control-edit {
        .el-input {
            width: 60%;
        }
    }
    .admin-control-add {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>
